<template>
	<view class="classLayout pageBg">
		<custom-nav-bar title="分类"></custom-nav-bar>
		<view class="classify">
			<theme-item v-for="item in classifyList" :key="item.id" :item = item></theme-item>
		</view>
	</view>
</template>

<script setup>
import { ref } from "vue";
import {apiClassify} from "@/api/api.js";
import {onReachBottom} from "@dcloudio/uni-app"

const queryParamsClassify = {
	"pageNum":1,
	"pageSize":12
}
//获取分类列表
const classifyList = ref([])
const getClassifyList = async()=>{
	const res = await apiClassify(queryParamsClassify)
	classifyList.value = [...classifyList.value,...res.data]
	//判断数据是否无数据
	if(queryParamsClassify.pageSize > res.data.length) noData.value= true;
}
getClassifyList()

//下拉刷新
const noData = ref(false)
onReachBottom(()=>{
	if(noData.value) return;
	queryParamsClassify.pageNum++
	getClassifyList();
})
</script>

<style lang="scss" scoped>
.classify{
	padding:30rpx;
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap:15rpx;
}
</style>
